<template>
  <div class="dashboard-container transport-task customer-list-box">
    <el-card
      class="box-card"
      shadow="never"
    >
      <el-form
        ref="formList"
        :model="formList"
        label-width="80px"
      >
        <el-row :gutter="60">
          <!-- 员工账号 -->
          <el-col :span="8">
            <el-form-item
              label="员工账号:"
              style="margin-top: 20px"
            >
              <el-input
                v-model="formList.employeeNumber"
                clearable
                placeholder="请输入员工账号"
              />
            </el-form-item>
          </el-col>
          <!-- 员工姓名 -->
          <el-col :span="8">
            <el-form-item
              label="员工姓名:"
              style="margin-top: 20px"
            >
              <el-input
                v-model="formList.name"
                clearable
                placeholder="请输入员工姓名"
              />
            </el-form-item>
          </el-col>
          <!-- 工作状态 -->
          <el-col :span="8">
            <el-form-item
              label="工作状态:"
              style="margin-top: 20px"
              label-width="110px"
            >
              <el-select
                v-model="formList.workPatternId"
                clearable
                placeholder="请选择工作状态"
              >
                <el-option
                  v-for="item in workPatternId"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 月份 -->
          <el-col :span="8">
            <el-form-item
              label="月份:"
              style="margin-top: 20px; margin-bottom: 0px"
            >
              <el-date-picker
                v-model="formList.month"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- 所属机构 -->
          <el-col :span="8">
            <el-form-item
              label="所属机构:"
              style="margin-top: 20px; margin-bottom: 0px"
              label-width="110px"
            >
              <treeselect
                v-model="formList.agencuId"
                :options="agencyOptions"
                :normalizer="normalizer"
                :searchable="true"
                style="width: 100%"
                placeholder="请选择所属机构"
                no-options-text="暂无数据"
                no-results-text="暂无数据"
                @select="selectAgency"
                @open="open"
                @close="close"
              />
              <img
                ref="arrow"
                src="@/assets/pullDown.png"
                style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
            style="margin-top: 20px"
          >
            <el-form-item>
              <button
                type="button"
                class="el-button el-button--warning"
                @click="handleFilter('formList')"
              ><!----><!----><span>搜索</span></button>
              <el-button
                class="el-button el-button--warning"
                plain
                @click="resetForm('formList')"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card
      class="table-card-box"
      shadow="never"
    >
      <button
        type="button"
        class="el-button el-button--warning"
      ><!----><!----><span>排班设置</span></button>
      <el-button
        class="el-button el-button--warning"
        plain
      >绑定排班</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%;margin-top: 20px"
        :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
      >
        <div
          v-show="(!tableData || tableData.length <= 0) && !listLoading && !searchkey"
          slot="empty"
        >
          <img
            src="@/icons/pic-kong@2x.png"
            alt="img"
            style="margin-top: 20px;width: 25%;height: 25%;"
          >
          <p
            style="
                      margin-top: -20px;
                      padding-bottom: 0px;
                      "
          >这里空空如也</p>
        </div>
        <el-card
          v-show="(!tableData || tableData.length <= 0) && !listLoading && searchkey"
          slot="empty"
          class="table-empty-box"
          shadow="never"
        >
          <empty></empty>
        </el-card>
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="employeeNumber"
          align="left"
          label="员工账号"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          align="left"
          label="员工姓名"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          align="left"
          label="员工电话"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="userType"
          align="left"
          label="员工角色"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workPatternName"
          align="left"
          label="当前工作状态"
          min-width="130px"
        >
        </el-table-column>

        <el-table-column
          prop="workSchedules[0]"
          label="1"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules[1]"
          label="2"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules[2]"
          label="3"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules[3]"
          label="4"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules[4]"
          label="5"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules[5]"
          label="6"
          min-width="130px"
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules[6]"
          label="7"
          min-width="130px"
        >
        </el-table-column>
      </el-table>
      <!-- end -->
      <!-- 分页 -->
      <div
        v-show="tableData && tableData.length > 0"
        class="pagination"
      >
        <div
          class="pages"
        >
          <el-pagination
            :current-page="Number(formList.page)"
            :total="Number(total)"
            :page-size="Number(formList.pageSize)"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { workManage, selectWorkHistoryList } from '@/api/transit'
import { agencyList } from '@/api/institutions'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Manage',
  components: {
    Treeselect
  },
  data() {
    return {
      // 所属机构normalizer
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      tableData: [],
      total: null,
      workPatternId: [],
      agencyOptions: [],
      formList: {
        page: 1,
        pageSize: 10,
        workPatternId: '',
        name: '',
        employeeNumber: '',
        month: '',
        agencuId: null
      }

    }
  },
  created() {
    this.workManageList()
    this.selectWorkHistory()
    this.getAgencyList()
  },
  methods: {
    // 排班列表
    async workManageList() {
      const { data } = await workManage(this.formList)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 工作模式
    async selectWorkHistory() {
      const { data } = await selectWorkHistoryList()
      this.workPatternId = [...data[1], ...data[2]]

      // console.log(this.workPatternId)
    },
    // 获取起始/目的地机构列表数据
    async getAgencyList() {
      // 读取数据
      const { data: res } = await agencyList()
      // 获取数据给options
      this.agencyOptions = JSON.parse(res)
    },
    // 赋予搜索id为搜索框内的数据
    selectAgency(val) {
      this.formList.agencuId = val.id
    },
    // 打开所属机构下拉框
    open() {
      this.$refs.arrow.style.transform = 'rotate(-180deg)'
    },
    // 关闭所属机构下拉框
    close() {
      this.$refs.arrow.style.transform = 'rotate(0deg)'
    },
    // 搜索框搜索信息
    handleFilter() {
      this.formList.page = 1
      this.workManageList(this.formList)
    },
    // 重置
    resetForm(formList) {
      // 用到了ref
      this.$refs[formList].resetFields()
      // this.formList = {}
      this.formList.name = ''
      this.formList.userId = ''
      this.formList.employeeNumber = ''
      this.formList.month = ''
      this.formList.agencuId = null
      this.getAgencyList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.formList.pageSize = val
      if (this.formList.page === 1) {
        this.workManageList(this.formList)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.formList.page = val
      this.workManageList()
    }
  }

}
</script>
    <style
      rel="stylesheet/scss"
      lang="scss"
      scoped
    >
      /deep/ th.date {
      .cell {
      padding-left: 17px !important;
      }
      }
      .work {
      width: 24px;
      height: 24px;
      background: #ffeeeb;
      border: 1px solid #e15536;
      border-radius: 50%;
      text-align: center;
      color: #e15536;
      font-size: 13px;
      }
      .history-name {
      width: auto !important;
      /deep/ .el-input__inner {
      width: 293px;
      }
      }

      .workArrange-manage-people-setting {
      /deep/ .el-dialog__body {
      padding: 30px 50px 10px 50px !important;
      }
      /deep/ .el-dialog__footer {
      padding-bottom: 40px;
      }
      }

      .work-type {
      /deep/ .el-form-item__content {
      margin-left: 40px !important;
      }
      /deep/ .el-radio:first-child {
      margin-right: 80px !important;
      }
      /deep/.el-radio__label {
      font-weight: bold;
      color: #333333;
      }
      }

      .dialog-footer {
      .el-button {
      width: 89px;
      height: 36px;
      padding: 10px 20px;
      }
      }

      .rest {
      width: 24px;
      height: 24px;
      background: #eff3f8;
      border: 1px solid #d8dde3;
      border-radius: 50%;
      text-align: center;
      color: #20232a;
      font-size: 13px;
      }

      .alert {
      margin: 10px 0px;
      }
      .pagination {
      margin-top: 40px;
      }
      .transport-task /deep/ .el-table td,
      .el-table th {
      padding: 12px 0;
      min-width: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      text-align: left;
      overflow: hidden;
      }

      // 下拉框
      /deep/ .el-select {
      width: 100%;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      /deep/ .el-table--scrollable-x .el-table__body-wrapper {
      padding-bottom: 5px;
      margin-bottom: 5px;
      &::-webkit-scrollbar {
      height: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(144, 147, 153, 0.3);
      }

      &::-webkit-scrollbar-track-piece {
      margin-right: 3px;
      margin-left: 3px;
      }
      }
      /deep/ .el-card {
      overflow: initial;
      }
    </style>

    <style></style>
